<script setup>
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

function handleLogout() {
  localStorage.removeItem('userId')
  router.push('/login')
}
</script>

<template>
  <div>
    <div class="global-bg"></div>
    <!-- 只在非登录/注册页显示导航栏 -->
    <div v-if="!['/login', '/register'].includes(route.path)" class="nav-bar">
      <div class="nav-left">
        <img src="/logo.png" class="nav-logo" />
        <div class="nav-title-group">
          <span class="nav-title-cn">杭州历史建筑信息交互平台</span>
          <span class="nav-title-en">Hangzhou Cultural Interaction Platform</span>
        </div>
      </div>
      <div class="nav-right">
        <a class="nav-link" :class="{active: route.path === '/home'}" @click="$router.push('/home')">首页</a>
        <a class="nav-link" :class="{active: route.path === '/chat'}" @click="$router.push('/chat')">智能助手</a>
        <el-button
          type="danger"
          plain
          size="small"
          class="logout-btn"
          @click="handleLogout"
        >退出登录</el-button>
      </div>
    </div>
    <router-view />
  </div>
</template>

<style scoped>
.nav-bar {
  width: 100%;
  height: 60px;
  background: #434b5c;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px #f0f1f2;
}
.nav-left {
  display: flex;
  align-items: center;
}
.nav-logo {
  width: 44px;
  height: 44px;
  margin-right: 14px;

  object-fit: cover;
}
.nav-title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-title-cn {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.1;
}
.nav-title-en {
  font-size: 12px;
  color: #e0e0e0;
  letter-spacing: 1px;
  margin-top: 2px;
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-link {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-left: 24px;
  text-decoration: none;
  line-height: 60px;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-link.active {
  color: #ffd04b;
  border-bottom: 2px solid #ffd04b;
}
.logout-btn {
  margin-left: 32px;
  height: 30px;
  align-self: center;
}
</style>
